<template>
    <u-popup :show="show" @close="show = false" mode="bottom" :round="10">
        <view @touchmove.prevent.stop class="popup-common">
            <view class="title">{{ t('selectAddress') }}</view>
            <scroll-view scroll-y="true" class="h-[50vh]">
                <view v-for="(item,index) in addressList" :key="item.id"
                      class="flex items-center mx-[var(--popup-sidebar-m)] border-1 border-[#eee] border-solid rounded-[var(--rounded-mid)] px-[var(--pad-sidebar-m)] py-[var(--pad-top-m)]"
                      :class="{'mb-[var(--top-m)]': addressList.length-1 != index, 'text-[var(--primary-color)] !border-[var(--primary-color)]': item.id == currAddressId}"
                      @click="selectAddress(index)">
                    <text class="nc-iconfont nc-icon-dingweiV6xx-1 text-[36rpx]"></text>
                    <view class="flex flex-col mx-[20rpx] w-[480rpx]">
                        <view class="flex items-center truncate leading-[1.5]">
                            <text class="mr-[8rpx] text-[30rpx] truncate max-w-[300rpx]">{{ item.name }}</text>
                            <text class="text-[30rpx]">{{ item.mobile }}</text>
                        </view>
                        <view class="truncate text-[26rpx] leading-[1.5] mt-[12rpx]">{{ item.full_address }}</view>
                    </view>
                    <text class="nc-iconfont nc-icon-xiugaiV6xx text-[32rpx] ml-auto" @click="editAddress(item)"></text>
                </view>
                <view v-if="!addressList || addressList && !addressList.length" class="text-[var(--text-color-light6)] text-[28rpx] text-center">{{ t('emptyAddress') }}
                </view>
            </scroll-view>

            <view class="btn-wrap">
                <button class="primary-btn-bg btn" @click="addAddress">{{ t('addAddress') }}</button>
            </view>
        </view>
    </u-popup>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getAddressList } from '@/app/api/member'
import { t } from '@/locale'
import { redirect } from '@/utils/common'

const show = ref(false)
const loading = ref(false)
const currAddressId = ref('') // 选中的索引
const propData: any = ref({})
const addressList = ref([])

const emits = defineEmits(['confirm'])

const open = (data: Object) => {
    show.value = true;
    propData.value = data;
    currAddressId.value = data.id;
}

getAddressList({}).then(({ data }) => {
    addressList.value = data;
    loading.value = false
})

const selectAddress = (index: number) => {
    let data: any = addressList.value[index];
    if (propData.value.delivery == 'local_delivery' && !data.lat && !data.lng) {
        // 待支付订单-同城配送，选择的地址没有经纬度的情况，会直接跳转到地图界面进行选择
        // 参数二，表示是否直接跳转到地图界面, 1跳转到地图界面，2表示不跳
        editAddress(data, 1);
    } else {
        let obj: any = {}
        obj.address_id = addressList.value[index].id
        obj.delivery = propData.value.delivery
        emits('confirm', obj)
    }
    show.value = false;
}

const editAddress = (data: Object, isSelectMap: number = 2) => {
    uni.setStorage({
        key: 'selectAddressCallback',
        data: {
            back: '/addon/shop/pages/point/payment',
            delivery: propData.value.delivery
        },
        success() {
            redirect({
                url: '/app/pages/member/address_edit',
                param: { id: data.id, source: 'shop_order_payment', isSelectMap }
            })
        }
    })
}

const addAddress = () => {
    uni.setStorage({
        key: 'selectAddressCallback',
        data: {
            back: '/addon/shop/pages/point/payment',
            delivery: propData.value.delivery
        },
        success() {
            redirect({ url: '/app/pages/member/address_edit', param: { source: 'shop_order_payment' } })
        }
    })
}

defineExpose({
    open
})
</script>

<style lang="scss" scoped>

</style>
